* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans SC", "Microsoft YaHei", Arial;
  list-style: none;
  text-decoration: none;
  color: #000;
  box-sizing: border-box;
  outline: none;
}

/* 每页的大盒子 */
.pageBox {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 900px;
}
.pageBox:nth-child(1) {
  background-color: #f8f8f8;
  position: relative;
  z-index: -1;
}

/* 被大盒子居中的内盒子 */
.innerBox {
  padding: 50px 43px 50px;
  width: 1278px;
  height: 700px;
  color: black;
  background-color: transparent;
  /* margin: 100px 0; */
  position: relative;
  border-radius: 7px;
  overflow: hidden;
}

/* 页头盒子 */
#headerBox {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 2px #737373;
}

/* 黄色圆环 */
.yellowRing {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 20px solid #ffd155;
  position: absolute;
  top: 40px;
  left: 30px;
  z-index: 0;
  transition: all 0.5s;
}

/* 蓝色小球 */
.blueBall {
  width: 35px;
  height: 35px;
  background-color: #0f9cf5;
  border-radius: 50%;
  border: 10px solid #0f9cf5;
  position: absolute;
  z-index: 0;
  transition: all 0.3s;
}

#blueBall1 {
  bottom: -5px;
  right: -7px;
}

/* 第一个蓝色小球动画 */
.innerBox:hover #blueBall1 {
  transform: translate(-600px, 0);
}

#blueBall2 {
  top: -5px;
  left: -10px;
  z-index: -1;
}

/* 第二个蓝色小球动画 */
.innerBox:hover #blueBall2 {
  transform: translate(900px, 0);
}

/* 三个页边装饰小环的盒子 */
.smallballBox {
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  position: absolute;
}

/* 装饰小环 */
.smallball {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  z-index: 0;
  margin: 5px;
}
.smallball:nth-child(1) {
  border: 3px solid #0f9cf5;
}
.smallball:nth-child(2) {
  border: 3px solid #ffd155;
}
.smallball:nth-child(3) {
  background-color: #0f9cf5;
  border: 3px solid #0f9cf5;
}

.balls1 {
  bottom: 50px;
  right: 43px;
}

.balls2 {
  top: 50px;
  right: 43px;
}

#balls3 {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
/* 导航栏小Alogo */
#teamLogo {
  height: 85px;
  margin-top: 35px;
}

/* 导航栏盒子 */
.head {
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  width: 1280px;
  color: black;
}

.head ul {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  width: 60%;
}
.head li {
  display: inline-block;
  font-size: 25px;
  text-align: center;
}
.head li a {
  display: block;
  text-decoration: none;
  color: black;
  line-height: 100px;
  margin-top: 20px;
  border-bottom: 10px solid white;
}

.head li a:hover {
  color: #0f9cf5;
}

/* 用新增小盒子设置出现的小黄线 */
.line {
  width: 0%;
  height: 5px;
  border-radius: 0.5rem;
  background-color: #ffd155;
  margin: 0 auto;
  align-content: center;
  transition: width 0.2s;
}
li:hover .line {
  width: 50%;
}

/* 大标语 */
#slogan {
  padding: 50px;
  float: left;
  position: absolute;
  left: 50px;
}
#sloganA {
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  background-color: transparent;
}
#sloganA img {
  position: absolute;
  right: 50px;
}

.Title {
  position: relative;
}
.Title:nth-child(1) {
  font-size: 113px;
  z-index: 2;
}
.Title:nth-child(2) {
  display: inline-block;
  font-size: 50px;
}
.Title:nth-child(2) p {
  position: relative;
  z-index: 2;
}

/* 设置镂空字体 */
.Title:nth-child(3),
.Title:nth-child(4) {
  z-index: 2;
  padding-left: 10px;
  font-size: 40px;
  line-height: 40px;
  font-size: 25px;
  text-align: center;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 1px #000;
}

.Title:nth-child(3) {
  width: 320px;
}

.Title:nth-child(4) {
  width: 230px;
}

/* 设置背景一半灰色 */
.titlebg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  border-radius: 5px;
  background-color: #737373;
  z-index: -1;
}

.pageTitle {
  text-align: center;
  position: relative;
  z-index: 1;
}

.head img {
  float: left;
}

.textAll {
  font-size: 22px;
  line-height: 40px;
  z-index: 1;
}
.textAll span {
  font-weight: 600;
  color: #0f9cf5;
}

/* 教授名 */
#professor span {
  font-weight: 600;
  color: #171717;
}

#videoBox {
  position: relative;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

#bg1 {
  background-image: url(img/teamHonorbg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#bg2 {
  background-image: url(img/projectSourcebg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
#bg1 .innerBox {
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px 5px #737373;
}

#bg2 .innerBox {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px 5px #737373;
}

/* 展示大盒子 */
.present {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}

/* 展示盒子 */
.presentBox {
  width: 285px;
  height: 292px;
  text-align: center;
  border: 2px solid #fff;
  line-height: 30px;
  color: #000;
}
.presentBox:hover {
  border: 2px solid #0f9cf5;
  background-color: #0f9cf5;
  color: white;
}

.presentBox img {
  width: 100%;
  height: 70%;
}

/* 利用纯css制作手动转换效果 */
.carousel {
  margin: auto;
  width: 100%;

  text-align: center;
  overflow: hidden;
}

.carousel ul {
  margin: 10px 0;
  padding: 0;
  /* 设置轮播总长度 */
  width: calc(1192px * 3);
  transition: all 0.3s;
}

/* 每页轮播 */
.carousel li {
  float: left;
  width: 1192px;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}

/* 轮播控制小按钮 */

.carousel input[name="carouselInput"]
 {
  display: none;
}

.carousel label[for^="carouselInput"]{
  position: absolute;
  bottom: 40px;
  width: 13px;
  height: 13px;
  margin: 5px;
  border: 3px solid #737373;
  line-height: 20px;
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
}
button {
  width: 13px;
  height: 13px;
  margin: 5px;
  border: 3px solid #737373;
  line-height: 20px;
  background: #fff;
  cursor: pointer;
  border-radius: 50%;
}


/* 设置小按钮位置 */

.carousel label[for="carouselInput1"] {
  left: 47%;
}


.carousel label[for="carouselInput2"] {
  left: 49%;
}


.carousel label[for="carouselInput3"] {
  left: 51%;
}


#carouselInput1:checked ~ ul {
  margin-left: 0;
}

/* 第二页向左移动三分之一 */

#carouselInput2:checked ~ ul {
  transform: translate(-1192px, 0);
}

/* 第三页向左移动三分之二 */

#carouselInput3:checked ~ ul {
  transform: translate(-2384px, 0);
}

#carouselInput1:checked ~ label[for="carouselInput1"],
#carouselInput2:checked ~ label[for="carouselInput2"],
#carouselInput3:checked ~ label[for="carouselInput3"] {
  background-color: #ffd155;
  border-color: #0f9cf5;
}

/* 瀑布流大盒子 */
#columnBigBox {
  height: auto;
  align-items: flex-start;
}
/* 瀑布流页 */
.columnPage {
  height: auto;
  width: 1280px;
  columns: 2;
  column-gap: 50px;
}

/* 各个介绍页面 */
.intro {
  width: 562px;
  height: 882px;
  border: 2px solid #dadada;
  margin-top: 100px;
  /*防止被瀑布流布局中盒子被自动截断*/
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
}
.intro:hover {
  border: 2px solid #737373;
  box-shadow: 0 0 10px 5px #737373;
}
.intro .TextAll {
  margin: 40px;
}
.intro img {
  width: 100%;
}

.intro h1 {
  margin: 10px 0 10px 30px;
  border-left: 10px solid #0f9cf5;
}
.intro .textAll {
  margin: 0 30px 30px;
  height: auto;
}

/*-----页尾招募信息------*/
.recruit {
  text-align: center;
  height: 500px;
}
/*页脚版权信息*/
#footer {
  height: 150px;
  width: 100%;
  background: transparent url(img/blackDown.png) no-repeat bottom;
  background-size: cover;
  line-height: 150px;
  text-align: center;
  color: #fff;
  font-size: 27px;
  float: bottom;
}
/* 页脚背景图片 */
#recruitImg img {
  margin: 50px;
}
